<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-spin :spinning="loading">
      <a-form
        name="basic"
        :label-col="{ span: 7 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        style="width: 500px"
      >
        <a-form-item label="旧密码">
          <a-input v-model:value="formValue.oldPassword" />
        </a-form-item>
        <a-form-item label="新密码">
          <a-input v-model:value="formValue.newPassword" />
        </a-form-item>
        <a-form-item label="确认新密码">
          <a-input v-model:value="formValue.confirmPassword" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 7, span: 16 }">
          <a-button type="primary" html-type="submit" @click="handleSubmit"
            >提交</a-button
          >
        </a-form-item>
      </a-form>
    </a-spin>
  </a-card>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import ResultEnum from "@/config/ResultEnum";
import { FormValue, submitPassword } from "./index";
import md5 from "js-md5";

export default defineComponent({
  components: {},
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const formValue = reactive<FormValue>({
      oldPassword: "",
      newPassword: "",
      confirmPassword: "",
    });

    onMounted(() => {});

    const handleSubmit = () => {
      if (!formValue.oldPassword) {
        message.error("请填写旧密码");
        return;
      }
      if (!formValue.newPassword) {
        message.error("请填写新密码");
        return;
      }
      if (!formValue.confirmPassword) {
        message.error("请填写确认新密码");
        return;
      }
      if (formValue.newPassword !== formValue.confirmPassword) {
        message.error("新密码与确认密码不一致");
        return;
      }
      loading.value = true;
      submitPassword({
        oldPassword: md5(formValue.oldPassword),
        newPassword: md5(formValue.newPassword),
        confirmPassword: md5(formValue.confirmPassword),
      }).then((res: any) => {
        loading.value = false;
        if (res.code == ResultEnum.SUCCESS_CODE) {
          message.success("修改成功");
        } else {
          message.error(res.message);
        }
      });
    };

    return {
      loading,
      formValue,
      handleSubmit,
    };
  },
});
</script>
